<template>
  <view v-if="detail" class="root">
    <swiper class="swiper">
      <swiper-item v-for="(item,i) in banners" :key="i" class="banner">
        <image :src="item" mode="widthFix" class="img"/>
      </swiper-item>
    </swiper>

    <view class="header">
      <view class="title">{{ detail.goodsName }}</view>
      <view class="price">
        <text>￥</text>
        <text class="num">{{ detail.price }}</text>
        <text class="gray">￥{{ detail.linePrice }}</text>
      </view>
    </view>
    <view class="shop" v-if="shop" @click="handleShopClick">
      <image :src="shop.cover" class="cover"></image>
      <view class="right">
        <view class="name">{{ shop.comName }}</view>
        <view class="address">{{ shop.address }}</view>
      </view>
    </view>
    <view class="content">
      <parser :html="detail.detail"/>
    </view>

    <view class="footer">

      <view class="btn" @click="handleConfirm">{{ type == 0 ? '立即预约' : '立即抢购' }}</view>

    </view>

    <my-dialog content="你确定要参与秒杀吗？" ref="comfirm"/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import Parser from "@/components/jyf-parser/jyf-parser";
import MyDialog from "@/components/dialog";

export default {
  name: "detail",
  components: {MyDialog, Parser},
  data() {
    return {
      detail: null,
      selectModel: null,

      shop: null,

      type: 0,
    }
  },
  computed: {
    banners() {
      let arr = [];
      let detail = this.detail;
      if (detail) {
        arr.push(detail.cover, ...detail.images)
      }
      return arr;
    }
  },
  methods: {
    handleConfirm() {
      if (this.type == 1) this.ms();
      else {
        let data = {
          shopId: this.detail.comId,
          classifyId: this.detail.goodsClassifyId,
          classifyName: this.detail.classifyName,
          goodsId: this.detail.id,
          goodsName: this.detail.goodsName,
          price: this.detail.price,
          linePrice: this.detail.linePrice
        }
        uni.navigateTo({url: `/pages/shop/choose/technician/index?${this.core.parseQueryString(data)}`})
      }
    },
    ms() {
      this.$refs.comfirm.show().then(() => {
        Api.buyMs(this.detail.id).then(res => {
          this.core.wxMpPay(res)
        })
      })
    },
    handleShopClick(){
      uni.navigateTo({url: `/pages/shop/index/index?id=${this.shop.id}`})
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    console.log(options)
    this.type = options.type || 0;
    let {id} = options
    Api.gettGoodsDetail(id).then(res => {
      this.detail = res;

      Api.getShopDetail(res.comId).then(res2 => {
        this.shop = res2;
      })
    })
  },
}
</script>

<style scoped lang='scss'>

.root {
  padding-bottom: calc(env(safe-area-inset-bottom) + #{r(140px)});
}

.swiper {
  height: r(750px);
  width: 100%;

  .img {
    width: 100%;
    height: 100%;
  }
}

.header {
  background-color: white;
  margin-bottom: r(24px);
  padding: r(14px 40px);

  .title {
    font-size: r(32px);
    font-weight: 500;
    color: #121212;
    margin-bottom: r(20px);
  }

  .price {
    font-size: r(24px);
    color: #E73832;

    .num {
      font-size: r(38px);
    }

    .gray {
      margin-left: r(20px);
      font-size: r(25px);
      color: #909090;
      text-decoration: line-through;
    }
  }


}

.shop {
  display: flex;
  background-color: white;
  padding: r(20px 30px);

  .cover {
    height: r(100px);
    width: r(100px);
    border-radius: r(10px);
    margin-right: r(20px);
  }

  .right {
    flex: 1;

    .name {
      font-size: r(34px);
    }

    .address {
      margin-top: r(10px);
      font-size: r(24px);
      color: #888;
    }
  }
}

.content {
  margin-top: r(30px);
  background-color: white;
  padding: r(14px 40px);
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(env(safe-area-inset-bottom) + #{r(120px)});
  box-shadow: r(1px 2px 15px 1px) rgba(129, 129, 129, 0.27);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: white;

  .btn {
    width: r(200px);
    height: r(80px);
    line-height: r(80px);
    background: #BF8F3A;
    border-radius: r(50px);
    font-size: r(30px);
    color: white;
    text-align: center;
    margin-right: r(30px);
  }
}
</style>